<!--  -->
<template>
  <div id="docs-box" class="col-md-6" v-if="type == 1">
    <h3>配置参数</h3>
    <ul>
        <li><a href="">用户的付款是直接到商户账户，还是到付钱拉账户？  </a></li>
        <li><a href="">微信公众号报错：下单账号与支付账号不一致，请核实后再支付。怎么解决？</a></li>
        <li><a href="">【密钥管理】查看如何生成与配置RSA密钥？</a></li>
        <li><a href="">【密钥管理】查看如何生成与配置RSA密钥？</a></li>
        <li><a href="">ukey丢失后，无法成功登陆，怎么办？</a></li>
    </ul>
    <a href="" class="read-more">查看全部16篇文档</a>
  </div>
  <div id="docs-box-1" v-else>
    <h3>被推荐的文档</h3>
    <ul>
      <li><a href="">用户的付款是直接到商户账户，还是到付钱拉账户？  </a></li>
      <li><a href="">微信公众号报错：下单账号与支付账号不一致，请核实后再支付。怎么解决？</a></li>
      <li><a href="">【密钥管理】查看如何生成与配置RSA密钥？</a></li>
      <li><a href="">【密钥管理】查看如何生成与配置RSA密钥？</a></li>
      <li><a href="">ukey丢失后，无法成功登陆，怎么办？</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},

  data () {
    return {}
  },

  props: {
    type: {
      type: String,
      default: '1'
    }
  },

  computed: {},

  methods: {}
}
</script>
<style lang='less' scoped>
  #docs-box{
    .t-l;
    margin-top: 2rem;
  };
  h3 {
    .ft16;
    padding-left: 10px;
    .bd-left(#21d376, 2px);
    line-height: 1;
    margin-bottom: 15px;
  }
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      line-height: 2;
      position: relative;
      .ellipsis;
      padding-left: 12px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        width: 4px;
        border-radius: 100%;
        background-color: #d0d3dc;
      }
      @media @max768 {
        .ft14;
      }
    }
  }
  .read-more {
    color: #666;
    @media @max768 {
        .ft14;
    }
  }

  #docs-box-1 {
    .t-l;
    padding: 15px;
    .bd(#e2eaec);
    h3 {
      .no-border;
      .bd-bottom(#e2eaec);
      line-height: 2;
    }
    li:before {
      content: none;
    }
  }
</style>
